<template>
  <div class="search">
    <myHead title="搜索"></myHead>
    <div class="sch">
        <div class="ipt">
          <img src="../../../static/img/dingweisousuo.png" alt="">
          <input type="text" placeholder="请输入你要搜索的美食名称" v-model="searchMsg">
        </div>
        <p @click="search(searchMsg)">搜索</p>
    </div>
    <div class="rm_no" v-show="isShow">
      <img src="../../../static/img/sousuono.png" alt="">
      <p>抱歉，没有发现的相关内容</p>
      <p>换个关键词试试吧</p>
    </div>
    <div class="rm_search">
        <p class="rm_tit">热门搜索</p>
        <div class="rm_item">
            <p v-for="(x,y) in rmList" :class="(y+1)%4 == 0 && y !=0 ?'four':'' " @click="jump('wmDelicious',x)">{{x}}</p>
        </div>
    </div>
    <div class="ls_search" v-if="!isShow">
        <div class="ls_tit">
            <p>历史搜索</p>
            <img src="../../../static/img/lajitong.png" alt="" @click="removeShow=true">
        </div>
        <div class="rm_item">
          <p v-for="(x,y) in lsList" :class="(y+1)%4 == 0 && y !=0 ?'four':'' " @click="jump('wmDelicious',x)">{{x}}</p>
          <div class="rm_no" v-show="lsList.length<=0">暂无历史记录</div>
        </div>
    </div>
    <!--  询问弹窗  -->
    <van-dialog v-model="removeShow" title="确定删除吗？" show-cancel-button width="3.2rem" @confirm="confirm"></van-dialog>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  export default {
    name: "search",
    components:{
      myHead
    },
    data() {
      return {
        rmList:['川菜','素食','早餐','大盘鸡','三明玉米','特惠午餐','套餐'],
        lsList:['川菜','素食','早餐','大盘鸡'],
        isShow:false, // 是否未搜索到
        removeShow:false,
        state:'no',
        searchMsg:this.$route.query.searchMsg,
        type:0
      }
    },
    created(){
      // type类型
      // 0 美食类
      this.type = this.$route.query.type;
      console.log(this.$route.query.type);
      // 获取搜索历史
      if (this.$myStorage.getItem(1)) {
          this.lsList = JSON.parse(this.$myStorage.getItem(1));
      } else {
          this.lsList = [];
      }
    },
    methods:{
      confirm(index,state){
        this.lsList = [];
        this.$myStorage.removeItem('localStorage','search')
      },
      jump(page,x){
        this.$router.push({
          name:page,
          query:{
            msg:x
          }
        })
      },
      search(x){
          var type;
          switch (this.type) {
              case 0:
                  type = 'wmDelicious';
                  break;
          }

          // 查找
          this.$myAxios('/api/index/search_keywords','get',{
              keywords:this.searchMsg
          }).then(res=>{
              console.log(res);
               // 存储搜索历史记录
               if (this.$myStorage.getItem(1)) {
                   var sech = JSON.parse(this.$myStorage.getItem(1));
                   for (var i in sech) {
                       if (sech[i] == this.searchMsg) {
                           break;
                       }
                   }
                   if (i == sech.length-1) {
                       sech.push(this.searchMsg);
                       this.$myStorage.setItem('localStorage','search',JSON.stringify(sech))
                   }
               } else {
                   this.$myStorage.setItem('localStorage','search',JSON.stringify([this.searchMsg]))
               }
               if (res.data.data.length < 1) {
                   this.isShow = true;
               }else {
                   this.isShow = false;
                   console.log(type)
                   this.$router.replace({
                       name:type,
                       query:{
                           msg:x
                       }
                   })
               }
          });

      }
    }
  }
</script>

<style scoped>
  .search {
    width: 100%;
    box-sizing: border-box;
    min-height: 6.67rem;
    padding: .5rem .15rem 0;
  }
  .sch {
    width: 100%;
    box-sizing: border-box;
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .sch>p {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF7814;
  }
  .ipt {
    width:3.05rem;
    height:.35rem;
    background:rgba(246,246,246,1);
    border-radius:.16rem;
    box-sizing: border-box;
    padding-left: .22rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .ipt>img {
    width: .16rem;
    height: .16rem;
    margin-right: .05rem;
  }
  .ipt>input {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:400;
    outline: none;
    border: none;
    background-color: transparent;
    width: 100%;
  }
  .rm_tit {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
    height: .5rem;
    line-height: .5rem;
    margin-bottom: .1rem;
  }
  .rm_item {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
  }
  .rm_item>p {
    width:.7rem;
    height:.3rem;
    background:rgba(245,245,245,1);
    border-radius:.15rem;
    line-height: .3rem;
    text-align: center;
    color: #999999;
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    margin-right: .2rem;
    margin-bottom: .2rem;
  }
  .four {
    margin-right: 0 !important;
  }

  .rm_no {
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-bottom: .4rem;
  }
  .rm_no>img {
    width: .55rem;
    height: .5rem;
    margin: .3rem 0 .2rem;
  }
  .rm_no>p:nth-child(2) {
    font-size:.14rem;
    font-family:SourceHanSansCN;
    color: #333333;
    margin-bottom: .15rem;
    font-weight: 500;
  }
  .rm_no>p:nth-child(3) {
    font-size:.12rem;
    font-family:SourceHanSansCN;
    color: #999999;
  }

  .ls_tit {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .1rem;
  }
  .ls_tit>img {
    width: .17rem;
    height: .17rem;
  }
  .ls_tit>p {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
  }

  .rm_no {
    text-align: center;
    font-size: .14rem;
    color: #999999;
  }
</style>
